<template>
	<view class="pageItem">
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-gengduo-copy" @tap="backPage"></view>
			<view class="text">收货地址</view>
		</view>
		<view class="clear_box"></view>
		<view class="list_item">
			<block v-for="(item,index) in list" :key="'address_'+index">
				<view class="row">
					<view class="r_txt1"><label class="tip" v-if="item.default">默认</label>{{item.address}}</view>
					<view class="t_txt2">程何<label style="padding-left: 20rpx;">18850858036</label></view>
					<view class="tools iconfont">&#xe67c;</view>
					<view class="tools2 iconfont" data-url="/pages/address/addressEdit?type=edit" @click="gotopage">&#xe640;</view>
				</view>
			</block>
		</view>
		<view class="footer">
			<view class="btn" data-url="/pages/address/addressEdit?type=add" @click="gotopage">添加地址</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{address:'福建省福州市晋安区福光路162号福建省福州市晋安区福光路162号',default:false},
					{address:'福州市晋安区福光路162号',default:true},
					{address:'福建省福州市晋安区福光路162号福建省福州市晋安区福光路162号',default:false},
					{address:'福建省福州市晋安区福光路162号福建省福州市晋安区福光路162号',default:false},
					{address:'福建省福州市晋安区福光路162号福建省福州市晋安区福光路162号',default:false}
				]
			};
		},
		methods:{
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			
		}
	}
</script>
<style>
page{
	background: #F6F8FA;
	padding-bottom: 21vw !important;
}
.pageItem{
	width: 100%;
	box-sizing: border-box;
}
.pageItem *{
	box-sizing: border-box;
}
</style>
<style lang="scss">
.list_item{
	width: 100%;
	padding: 3vw 4% 0;
	position: relative;
	z-index: 5;
	.row{
		width: 100%;
		position: relative;
		background: #ffffff;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-top: 25rpx;
		.r_txt1{
			width: 80%;
			font-size: 4vw;
			color: #333333;
			font-weight: bold;
			overflow:hidden; 
			text-overflow:ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
			.tip{
				padding: 5rpx 15rpx;
				font-size: 22rpx;
				color: #ffffff;
				background: #0DA4AD;
				border-radius: 10rpx;
				margin-right: 10rpx;
				font-weight: 500;
			}
		}
		.t_txt2{
			width: 80%;
			font-size: 3.5vw;
			color: #666666;
			padding-top: 10rpx;
		}
		.tools{
			position: absolute;
			text-align: center;
			color: #666666;
			font-size: 5.5vw;
			right: 30rpx;
			top: 30rpx
		}
		.tools2{
			@extend .tools;
			right: calc(30rpx + 8vw)
		}
	}
}
.footer{
	position: fixed;
	z-index: 98;
	width: 100%;
	height: 19vw;
	padding: 2vw 4% 5vw;
	bottom: 0;
	left: 0;
	background: #F6F8FA;
	.btn{
		height: 12vw;
		line-height: 12vw;
		border-radius: 7vw;
		text-align: center;
		width: 100%;
		background: #0DA4AD;
		font-size: 5vw;
		color: #ffffff;
		letter-spacing: 3rpx;
	}
}
</style>
